<template>
	<view class="content">
		<view class="login-m">
			<view class="login-item">
				<view class="logo">
					<!-- #ifndef MP-TOUTIAO -->
					<open-data type="userAvatarUrl"></open-data>
					<!-- #endif -->
					<!-- #ifdef MP-TOUTIAO -->
					<image class="toutiao-logo" :src="logoImage"></image>
					<!-- #endif -->
				</view>
			</view>
			<view class="login-tip">
				<view class="login-tip-big">申请获取以下权限</view>
				<view class="login-tip-small">获得你的公开信息 （昵称、头像等）</view>
			</view>
		</view>
		<view class="login-b flc u-f-item">
			<button class="auth-btn refuse" @click="handleRefuse">拒绝</button>
			<button class="auth-btn "  open-type="getPhoneNumber"
							@getphonenumber="loginPhone"  hover-class="btn-hover">允许</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			code: ''
		};
	},
	onLoad() {
		this.getCode();
	},
	methods: {
			async loginPhone(e) {

				let phoneInfo = e.detail
				console.log(phoneInfo,1111)
				let postData = {
					encryptedData: phoneInfo.encryptedData,
					iv: phoneInfo.iv,
					code:this.code,
				}
				this.$api.wxPhone(postData, res => {
					if (res.code) {
						this.$db.set("userinfo",res.data.userinfo)
						this.$db.set("userToken",res.data.userinfo.token)
						uni.navigateBack()
					} else {
						this.getCode();
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
			},
		getCode(){
			
			let _this = this;
			uni.login({
				success: function(res) {
					console.log(res)
					if (res.code) {
						_this.code = res.code;
					} else {
						//login成功，但是没有取到code
						_this.$common.errorToShow('未取得code');
					}
				},
				fail: function(res) {
					_this.$common.errorToShow('用户授权失败wx.login');
				}
			});
		},
		handleRefuse() {
			uni.showToast({
				title: '未授权',
				icon: 'none',
				duration: 1000
			});
			setTimeout(() => {
				uni.hideToast();
				uni.navigateBack(-1);
			}, 1000);
		},
		
	}
};
</script>

<style lang="scss">
.content {
	background-color: #fff;
	height: 100vh;
	padding: 100upx 60upx 0;
}
.login-item {
	display: flex;
	justify-content: center;
	padding-bottom: 40upx;
	border-bottom: 1upx solid #dddddd;
}
.logo {
	display: block;
	width: 180upx;
	height: 180upx;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.login-tip {
	padding: 60upx 0;
	&-big {
		font-size: 28upx;
		line-height: 80upx;
	}
	&-small {
		font-size: 12px;
		color: #9e9e9e;
	}
}
.app-name {
	font-size: 28upx;
	color: #999;
}
.login-b .btn-g {
	margin-top: 40upx;
}
.auth-btn {
	flex: 1;
	display: block;
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	font-size: 12px;
	color: #fff;
	background: #1aad19;
	border-radius: 40upx;
	&.refuse {
		background: #999;
		margin-right: 40upx;
	}
}
.toutiao-logo {
	width: 100%;
	height: 100%;
}
</style>
